(function () {
    var playerContainer = $("#player-container");
    var playerIds = State.scorer.getPlayerIds();

    // Create a box for each player.
    $.each(Data.players, function (playerIndex, playerData) {
        var playerId = playerIds[playerIndex];

        var playerBox = $("<div></div>").
            addClass("player").
            css("background-color", playerData.color);
        playerBox.append($("<div class=\"score\">0</div>"));
        playerBox.append($("<div class=\"trains\">0</div>"));
        playerContainer.append(playerBox);

        // Initialize train count.
        $("div.trains", playerBox).text(State.scorer.getRemainingTrains(playerId));

        // Update score on change.
        State.scorer.scoreUpdated.on(function (player, score) {
            if (player.getId() === playerId) {
                $("div.score", playerBox).text(score.toString());
            }
        });

        // Update remaining trains on change.
        State.scorer.remainingTrainsUpdated.on(function (player, trains) {
            if (player.getId() === playerId) {
                $("div.trains", playerBox).text(trains.toString());
            }
        })
    });
}());
